import React, { Component } from 'react'
import { Modal, Table, Button } from 'antd';
import axios from 'axios';
import BaseModal from '../../components/baseModel'

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

export default class App extends React.Component {
  state = {
    selectedRowKeys: [], // Check here to configure the default column
    loading: false,
    tableArr: [],
    total: 0,
    current: 1,
    visible: false,
    columns: [
      {
        title: 'ID',
        dataIndex: 'id',
      },
      {
        title: '姓名',
        dataIndex: 'username',
      },
      {
        title: '理论',
        dataIndex: 'theory',
      },
      {
        title: '技能',
        dataIndex: 'skill',
      },
      {
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <>
            <Button onClick={() => {

              // console.log(record, "record")

              this.setState(() => ({
                visible: true, formInfo: record
              }));
              setTimeout(() => {
                // console.log(this.refs.myModal.refs.myform)
                this.refs.myModal.refs.myform.setFieldsValue(this.state.formInfo)
              }, 0)

            }} style={{ marginRight: '5px' }} size="small" type="primary">编辑</Button>
            <Button size="small" type="ghost">删除</Button>
          </>
        ),
      },
    ],
    formInfo: {}
  };


  componentDidMount() {
    this.getTableList({})
  }

  async getTableList({ page = 0, size = 5 }) {
    let data = await axios.get('/api/pageGrade', {
      params: { page, size }
    })
    console.log(data, 'data')
    let list = data.data.data;
    list.forEach((item, index) => {
      item.key = item.id;
    })
    this.setState({ tableArr: list, total: data.data.total })
    console.log(this.state.tableArr, 'tableArr')
  }

  start = () => {
    this.setState({ loading: true });
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false,
      });
    }, 1000);
  };

  onSelectChange = selectedRowKeys => {
    // console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys }, () => {
      console.log('selectedRowKeys:', selectedRowKeys.join())
    });
  };

  onChange(val) {
    console.log('分页：', val)
    this.setState({ current: val.current })
    this.getTableList({ page: val.current - 1 })

  }

  showModal = () => {
    this.setState({
      visible: true,
      formInfo: 0
    });

    console.log(this.refs.myModal.refs.myform)

  };

  closeModal = (val) => {
    console.log(val, 'val------------------')
    this.setState({
      visible: false,
    });
    axios.post('/api/updateGrade', val).then(res => {
      console.log(res, 'res')
    })
  }

  render() {
    const { formInfo, visible, columns, loading, selectedRowKeys, tableArr, total, current } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;
    return (
      <div>
        <BaseModal
          ref="myModal"
          visible={visible}
          closeModal={(val) => this.closeModal(val)}
          formInfo={formInfo}
        ></BaseModal>

        <Button onClick={this.showModal} type="primary">添加数据</Button>
        <div style={{ marginBottom: 16 }}>
          <Button type="primary" onClick={this.start} disabled={!hasSelected} loading={loading}>
            Reload
          </Button>
          <span style={{ marginLeft: 8 }}>
            {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
          </span>
        </div>
        <Table
          onChange={(val) => this.onChange(val)}
          rowSelection={rowSelection}
          columns={columns}
          dataSource={tableArr}
          pagination={
            { pageSize: 5, current, total }
          }
        />
      </div>
    );
  }
}

// ReactDOM.render(<App />, mountNode);